<template>
	<view class="" style="width: 100vw; height: 100vh; overflow: scroll;">
		<view><u-tabs-swiper ref="uTabs" :list="child" :current="current" @change="tabsChange" :is-scroll="false" swiperWidth="750"></u-tabs-swiper></view>

		<swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish" style="width: 100%;" :style="{ height: height }">
			<swiper-item class="swiper-item" v-for="(item, index) in child" :key="indexddd" style="width: 100%;">
				<image :src="item.thumb" mode="widthFix" style="width: 100%;" @load="image" :data-id="index"></image>

				<view class="" style="height: 70rpx; width: 100vw;"></view>
			</swiper-item>
		</swiper>

		<!-- 	<u-tabs :list="child" :is-scroll="false" :current="current" @change="tabsChange"></u-tabs>
		<image :src="child[swiperCurrent.thumb]" mode="aspectFill"  @load="image" :style="{ height: height }"></image> -->

		<view
			@click="gotosubjct(child[indexddd].id)"
			style="width: 100%;height: 80rpx;background-color: #007AFF;font-size: 28rpx;color: #FFFFFF;text-align: center;line-height: 80rpx;
		position: fixed;bottom: 0px;"
		>
			立即报名
		</view>
	</view>
</template>

<script>
import helper from '../common/helper.js';
export default {
	data() {
		return {
			indexddd: 0,
			// context: '<div>测试</div>'
			img: '',
			id: '',
			child: [],
			data: [],
			height: '',
			belongcoach_userid:'',
			// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
			current: 0, // tabs组件的current值，表示当前活动的tab选项
			swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
			payShow: '',
		};
	},
	onLoad() {
		const obj = uni.getStorageSync('infoo');
		this.belongcoach_userid = obj.belongcoach_userid
		obj.belongcoach_userid ? (this.payShow = true) : (this.payShow = false);
		var info = this.$Route.query.child;
		var ojb = [
			{
				name: info.name,
				thumb: info.thumb,
				id: info.id,
			},
		];
		this.child = [...ojb, ...info.child];
	},
	methods: {
		image(e) {
			let height = e.detail.height + 'rpx';

			this.child[e.mp.target.dataset.id].h = height;

			this.$forceUpdate();
			this.height = this.child[0].h;
		},
		gotosubjct(id) {
			// user_id/
			if (this.payShow) {
				this.$Router.push({
					name: 'jiaolianxiangqing',
					params: {
						id: this.belongcoach_userid,
					},
				});
			} else {
				helper.subId = '';
				this.$Router.pushTab({
					name: 'jiaolian_tuandui',
				});
			}
		},

		// tabs通知swiper切换
		tabsChange(index) {
			this.swiperCurrent = index;
		},
		// swiper-item左右移动，通知tabs的滑块跟随移动
		transition(e) {
			let dx = e.detail.dx;
			this.$refs.uTabs.setDx(dx);
		},
		// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
		// swiper滑动结束，分别设置tabs和swiper的状态
		animationfinish(e) {
			this.swiperCurrent = e.detail.current;
			this.height = this.child[this.swiperCurrent].h;

			this.$forceUpdate();
			let current = e.detail.current;
			this.$refs.uTabs.setFinishCurrent(current);
			this.swiperCurrent = current;
			this.current = current;
		},
		// scroll-view到底部加载更多
		onreachBottom() {},
	},
};
</script>

<style lang="scss" scoped>
/deep/ .u-tabs-scroll-box {
	background-color: #3187fb !important;
	// color: #FFFFFF !important;
}
/deep/ .u-tabs-item {
	color: #ffffff !important;
}
</style>
